<template>
  <div class="sample-tutorial">
    <div id="ss" class="sample-spreadsheets"></div>
    <div class="options-container">
      <div class="sp-demo-childBlock">
        <div class="sp-demo-Header">
          <strong class="sp-demo-HeaderTitle">Settings</strong>
        </div>
        <div id="settingsDiv">
          <div id="richEditor" class="rich-editor"></div>
          <ul id="fontSizeList" class="list">
            <li class="fontsize-item" value='1'>10</li>
            <li class="fontsize-item" value='2'>13</li>
            <li class="fontsize-item" value='3'>16</li>
            <li class="fontsize-item" value='4'>18</li>
            <li class="fontsize-item" value='5'>24</li>
            <li class="fontsize-item" value='6'>32</li>
            <li class="fontsize-item" value='7'>48</li>
          </ul>
          <ul id="fontFamilyList" class="list fontfamily-list">
            <li class="fontfamily-item">Segoe UI</li>
            <li class="fontfamily-item">Arial</li>
            <li class="fontfamily-item">Calibri</li>
            <li class="fontfamily-item">Courier New</li>
            <li class="fontfamily-item">Comic Sans MS</li>
            <li class="fontfamily-item">Microsoft YaHei</li>
            <li class="fontfamily-item">Times New Roman</li>
          </ul>
          <ul id="colorPicker" class="list">
            <li class="colorpicker-item" style="background-color:#FFFFFF;"></li>
            <li class="colorpicker-item" style="background-color: #C00000;"></li>
            <li class="colorpicker-item" style="background-color: #FF0000;"></li>
            <li class="colorpicker-item" style="background-color: #FFC003;"></li>
            <li class="colorpicker-item" style="background-color: #FFFF00;"></li>
            <li class="colorpicker-item" style="background-color: #94D051;"></li>
            <li class="colorpicker-item" style="background-color: #00B050;"></li>
            <li class="colorpicker-item" style="background-color: #00AFF0;"></li>
            <li class="colorpicker-item" style="background-color: #006EC3;"></li>
            <li class="colorpicker-item" style="background-color: #001E6E;"></li>
            <li class="colorpicker-item" style="background-color: #6E32A0;"></li>
            <li class="colorpicker-item" style="background-color: #000000;"></li>
          </ul>
          <button id="setRichText" value="Set Rich Text">Set Rich Text</button>
        </div>
      </div>
    </div>
    <div class="options-container1">
      <div class="option-row">
        <div class="inputContainer">
          <input type="file" id="fileDemo" class="input">
          <input type="button" id="loadExcel" @click='importForm' value="import" class="button">
        </div>
        <div class="inputContainer">
          <input id="exportFileName" value="export.xlsx" class="input">
          <input type="button" id="saveExcel" value="export" class="button">
        </div>
      </div>
      <div class="option-row">
        <div class="group">
          <label>Password:
            <input type="password" id="password">
          </label>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
  import GC from "@grapecity/spread-sheets";
  import "@grapecity/spread-sheets-vue";
  import "@grapecity/spread-sheets-resources-zh";
  import ExcelIO from "@grapecity/spread-excelio";
  import FaverSaver from "file-saver";
  import "@grapecity/spread-sheets-print";

  // GC.Spread.Common.CultureManager.culture("zh-cn");
  // GC.Spread.Sheets.LicenseKey = ExcelIO.LicenseKey = "your key"
  export default {
    data() {
      return {
        excelIo: null,
        spread: null,
        sheet: null
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        this.excelIo = new ExcelIO.IO();
        this.sheet = this.spread.getActiveSheet();
        // 不知道干嘛用的暂时注释
        // spread.fromJSON(jsonData);
        this.initSpread(this.spread);
        this.setOption(this.spread);
      },
      initSpread(spread) {
        var lawOfUniversalGravitation = {
          richText: [
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: "F = (G * M"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "1"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: " * M"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "2"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: ") / R"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 1
              },
              text: "2"
            }
          ]
        };
        var reaction = {
          richText: [
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: "3 Ba(OH)"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "2"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: " + 2 H"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "3"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: "PO"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "4"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: " → 6 H"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "2"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: "O + Ba"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "3"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: "(PO"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "4"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: ")"
            },
            {
              style: {
                font: "normal 24px Calibri",
                vertAlign: 2
              },
              text: "2"
            },
            {
              style: {
                font: "normal 24px Calibri"
              },
              text: "↓"
            }
          ]
        };
        var google = {
          richText: [
            {
              style: {
                font: "bold 36px Calibri",
                foreColor: "rgb(78,133,242)"
              },
              text: "G"
            },
            {
              style: {
                font: "bold 36px Calibri",
                foreColor: "rgb(228,65,52)"
              },
              text: "o"
            },
            {
              style: {
                font: "bold 36px Calibri",
                foreColor: "rgb(247,188,32)"
              },
              text: "o"
            },
            {
              style: {
                font: "bold 36px Calibri",
                foreColor: "rgb(78,133,242)"
              },
              text: "g"
            },
            {
              style: {
                font: "bold 36px Calibri",
                foreColor: "rgb(65,168,87)"
              },
              text: "l"
            },
            {
              style: {
                font: "bold 36px Calibri",
                foreColor: "rgb(228,65,52)"
              },
              text: "e"
            }
          ]
        };
        var sheet = spread.sheets[0];
        sheet.suspendPaint();
        sheet.setColumnWidth(0, 720);
        sheet.setValue(0, 0, 'Law of universal gravitation:', 3);
        sheet.setValue(1, 0, lawOfUniversalGravitation, 3);
        sheet.setRowHeight(1, 40);
        sheet.getCell(1, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center);
        sheet.setValue(3, 0, 'The reaction of barium hydroxide with phosphoric acid:', 3);
        sheet.setValue(4, 0, reaction, 3);
        sheet.setRowHeight(4, 40);
        sheet.getCell(4, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center);
        sheet.setValue(6, 0, google, 3);
        sheet.setRowHeight(6, 50);
        sheet.name('Basic Usage');
        sheet.resumePaint();
        spread.options.tabStripRatio = 0.8;
      },
      setOption(spread) {
        var _extends = Object.assign || function (target) {
          for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i];
            for (var key in source) {
              if (Object.prototype.hasOwnProperty.call(source, key)) {
                target[key] = source[key];
              }
            }
          }
          return target;
        };

        var addEventListener = function (parent, type, listener) {
          return parent.addEventListener(type, listener);
        };
        var appendChild = function (parent, child) {
          return parent.appendChild(child);
        };
        var createElement = function (tag) {
          return document.createElement(tag);
        };
        var queryCommandState = function (command) {
          return document.queryCommandState(command);
        };
        var queryCommandValue = function (command) {
          return document.queryCommandValue(command);
        };
        var defaultClasses = {
          actionbar: 'rich-editor-actionbar',
          button: 'rich-editor-button',
          content: 'rich-editor-content',
          selected: 'rich-editor-button-selected'
        };
        var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
        var formatBlock = 'formatBlock';
        var exec = function (command) {
          var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
          return document.execCommand(command, false, value);
        };
        // font element limitation, only support font size from 1~7
        var convertFontSize = function (value) {
          if (value <= 10) {
            return 1;
          } else if (value <= 13) {
            return 2;
          } else if (value <= 16) {
            return 3;
          } else if (value <= 18) {
            return 4;
          } else if (value <= 24) {
            return 5;
          } else if (value <= 32) {
            return 6;
          } else {
            return 7;
          }
        };
        var fontSizeDict = [0, 10, 13, 16, 18, 24, 32, 48];

        var _stopBubble = function (e) {
          if (e && e.stopPropagation) {
            e.stopPropagation();
          } else {
            window.event.cancelBubble = true;
          }
        };
        var _colorRGB2Hex = function (color) {
          var rgb = color.split(',');
          var r = parseInt(rgb[0].split('(')[1]);
          var g = parseInt(rgb[1]);
          var b = parseInt(rgb[2].split(')')[0]);
          return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        };
        var createRichTextElement = function (tag, value) {
          var elem;
          switch (tag) {
            case 'subscript':
              elem = createElement('sub');
              break;
            case 'superscript':
              elem = createElement('sup');
              break;
            case 'underline':
              elem = createElement('u');
              break;
            case 'strikeThrough':
              elem = createElement('strike');
              break;
            case 'foreColor':
              elem = createElement('font');
              elem.color = _colorRGB2Hex(value);
              break;
            case 'fontName':
              elem = createElement('font');
              elem.face = value;
              break;
            case 'fontSize':
              elem = createElement('font');
              elem.size = convertFontSize(value);
              break;
            case 'bold':
              elem = createElement('b');
              break;
            case 'italic':
              elem = createElement('i');
              break;
            default:
              elem = createElement('span');
              break;
          }
          return elem;
        };
        var addFonts = function (container) {
          var defaultFonts = {
            ff1: { name: "Arial", text: "Arial" },
            ff2: { name: "Arial Black", text: "Arial Black" },
            ff3: { name: "Calibri", text: "Calibri" },
            ff4: { name: "Cambria", text: "Cambria" },
            ff5: { name: "Candara", text: "Candara" },
            ff6: { name: "Century", text: "Century" },
            ff7: { name: "Courier New", text: "Courier New" },
            ff8: { name: "Comic Sans MS", text: "Comic Sans MS" },
            ff9: { name: "Garamond", text: "Garamond" },
            ff10: { name: "Georgia", text: "Georgia" },
            ff11: { name: "Malgun Gothic", text: "Malgun Gothic" },
            ff12: { name: "Mangal", text: "Mangal" },
            ff13: { name: "Meiryo", text: "Meiryo" },
            ff14: { name: "MS Gothic", text: "MS Gothic" },
            ff15: { name: "MS Mincho", text: "MS Mincho" },
            ff16: { name: "MS PGothic", text: "MS PGothic" },
            ff17: { name: "MS PMincho", text: "MS PMincho" },
            ff18: { name: "Tahoma", text: "Tahoma" },
            ff19: { name: "Times", text: "Times" },
            ff20: { name: "Times New Roman", text: "Times New Roman" },
            ff21: { name: "Trebuchet MS", text: "Trebuchet MS" },
            ff22: { name: "Verdana", text: "Verdana" },
            ff23: { name: "Wingdings", text: "Wingdings" }
          };
          var $ul = container;
          var fontItems = [];
          var prefix = 'ff', i = 1, id = prefix + i;
          while (defaultFonts[id]) {
            fontItems.push(('<li class="fontfamily-item">' +
              defaultFonts[id].name +
              '</li>'));
            // .replace(/\{id\}/g, id));
            i++;
            id = prefix + i;
          }
          $ul.append($(fontItems.join('')));
        };

        var defaultActions = {
          fontFamily: {
            icon: '<span id="fontFamilyValue">Calibri</span>' +
              '<span class="drop-down-arrow"></span>',
            title: 'Bold',
            type: 'drop-down',
            specialStyle: {
              width: '150px'
            },
            dropDownListId: 'fontFamilyList',
            queryValue: function () {
              var value = queryCommandValue('fontName').replace(/"/g, '');
              if (value.length > 15) { // if fontFamily string is too long,
                value = value.substring(0, 15) + '...';
              }
              document.getElementById('fontFamilyValue').innerText = value;
            },
            result: function (e) {
              e.currentTarget.style.display = 'none';
              _stopBubble(e);
              var result = e.target.nodeName.toUpperCase() === 'LI' ? e.target.innerText : null;
              if (result) {
                document.getElementById('fontFamilyValue').innerText = result;
                exec('fontName', result);
                return true;
              } else {
                return false;
              }
            }
          },
          fontSize: {
            icon: '<span id="fontSizeValue">13</span>' +
              '<span class="drop-down-arrow"></span>',
            title: 'Bold',
            type: 'drop-down',
            specialStyle: {
              width: '40px'
            },
            dropDownListId: 'fontSizeList',
            queryValue: function () {
              var fontSizeMap = [0, 10, 13, 16, 18, 24, 32, 48];
              var value = queryCommandValue('fontSize');
              document.getElementById('fontSizeValue').innerText = fontSizeMap[value] ? fontSizeMap[value] : document.getElementById('fontSizeValue').innerText;
            },
            result: function (e) {
              e.currentTarget.style.display = 'none';
              _stopBubble(e);
              var result = e.target.nodeName.toUpperCase() === 'LI' ? parseInt(e.target.value) : null;
              if (result !== null) {
                document.getElementById('fontSizeValue').innerText = fontSizeDict[result];
                exec('fontSize', result);
                return true;
              } else {
                return false;
              }
            }
          },
          bold: {
            icon: '<b>B</b>',
            title: 'Bold',
            state: function () {
              return queryCommandState('bold');
            },
            result: function () {
              return exec('bold');
            }
          },
          italic: {
            icon: '<i>I</i>',
            title: 'Italic',
            state: function () {
              return queryCommandState('italic');
            },
            result: function () {
              return exec('italic');
            }
          },
          underline: {
            icon: '<u>U</u>',
            title: 'Underline',
            state: function () {
              return queryCommandState('underline');
            },
            result: function () {
              return exec('underline');
            }
          },
          strikethrough: {
            icon: '<strike>S</strike>',
            title: 'Strike-through',
            state: function () {
              return queryCommandState('strikeThrough');
            },
            result: function () {
              return exec('strikeThrough');
            }
          },
          colorPicker: {
            icon: '<span id="foreColorValue" class="color_picker_result">&nbsp;A&nbsp;</span>' +
              '<span class="drop-down-arrow"></span>',
            title: 'colorPicker',
            type: 'drop-down',
            specialStyle: {
              width: '40px'
            },
            dropDownListId: 'colorPicker',
            queryValue: function () {
              var value = queryCommandValue('foreColor');
              document.getElementById('foreColorValue').style.borderBottomColor = value;
            },
            result: function result(e) {
              e.currentTarget.style.display = 'none';
              _stopBubble(e);
              return e.target.nodeName.toUpperCase() === 'LI' ? exec('foreColor', _colorRGB2Hex(e.target.style.backgroundColor)) : false;
            }
          },
          superScript: {
            icon: 'X<sup>2</sup>',
            title: 'SuperScript',
            state: function () {
              return queryCommandState('superscript');
            },
            result: function () {
              return exec('superscript');
            }
          },
          subScript: {
            icon: 'X<sub>2</sub>',
            title: 'SubScript',
            state: function () {
              return queryCommandState('subscript');
            },
            result: function () {
              return exec('subscript');
            }
          }
        };

        function _getRichText() {
          var iterator = document.createNodeIterator(document.getElementsByClassName('rich-editor-content')[0], NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false);
          var root = iterator.nextNode();// root
          var richText = [];
          var style = {};
          var text = '';
          var node = iterator.nextNode();
          var underlineNode = null, lineThroughNode = null, pNode = null;
          while (node !== null) {
            if (node.nodeType === 3/*TextNode*/) {
              text = node.nodeValue;
              style = document.defaultView.getComputedStyle(node.parentElement, null);
              if (underlineNode && underlineNode.contains(node) === false) {
                underlineNode = null;
              }
              if (lineThroughNode && lineThroughNode.contains(node) === false) {
                lineThroughNode = null;
              }
              if (pNode && _getLastTextNode(pNode) === node && _getLastTextNode(root) !== node) {
                text = text + '\r\n';
                pNode = null;
              }
              var richTextStyle = _getRichStyle(style, underlineNode, lineThroughNode);
              _handleSuperAndSubScript(root, node, richTextStyle);
              richText.push({
                style: richTextStyle,
                text: text
              });
            } else if (node.nodeName.toLowerCase() === 'p') {
              pNode = node;
            } else if (node.nodeName.toLowerCase() === 'u') {
              underlineNode = node;
            } else if (node.nodeName.toLowerCase() === 'strike') {
              lineThroughNode = node;
            }

            node = iterator.nextNode();
          }
          return richText;
        };

        function _handleSuperAndSubScript(root, node, style) {
          if (root === node) {
            return;
          }
          while (node.parentNode !== root) {
            if (node.nodeName.toLowerCase() === 'sub') {
              style.vertAlign = 2;
              break;
            }
            if (node.nodeName.toLowerCase() === 'sup') {
              style.vertAlign = 1;
              break;
            }
            node = node.parentNode;
          }
        };

        function _getRichStyle(style, isUnderlineNode, isLineThroughNode) {// getComputedStyle can't get inherit textDecoration
          return {
            font: (style.fontWeight === '700' ? 'bold ' : '') + (style.fontStyle === 'italic' ? 'italic ' : '') + style.fontSize + ' ' + style.fontFamily,
            foreColor: style.color,
            textDecoration: (isUnderlineNode ? 1 : 0) | (isLineThroughNode ? 2 : 0)
          };
        };

        function _getLastTextNode(root) {
          if (root && root.nodeType === 1) {
            var child = root.lastChild;
            return _getLastTextNode(child);
          } else {
            return root;
          }
        };

        // 初始化内容
        var _initContent = function (settings) {

          var actions = settings.actions ? settings.actions.map(function (action) {
            if (typeof action === 'string') {
              return defaultActions[action];
            }
            else if (defaultActions[action.name]) {  //NOSONAR
              return _extends({}, defaultActions[action.name], action);
            }
            return action;
          }) : Object.keys(defaultActions).map(function (action) {
            return defaultActions[action];
          });

          var classes = _extends({}, defaultClasses, settings.classes);

          var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';

          var actionbar = createElement('div');
          actionbar.className = classes.actionbar;

          appendChild(settings.element, actionbar);

          var content = settings.element.content = createElement('div');
          content.contentEditable = true;
          content.className = classes.content;

          content.oninput = function (_ref) {
            var firstChild = _ref.target.firstChild;
            if (firstChild && firstChild.nodeType === 3) {
              exec(formatBlock, '<' + defaultParagraphSeparator + '>');
            } else if (content.innerHTML === '<br>') {//NOSONAR
              content.innerHTML = '';
            }
          };
          content.onkeydown = function (event) {
            if (event.key === 'Tab') {
              event.preventDefault();
            } else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
              setTimeout(function () {
                return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
              }, 0);
            }
          };
          appendChild(settings.element, content);
          var contentWrapper = createElement(defaultParagraphSeparator);


          appendChild(content, contentWrapper);

          if (!this._addedFonts) {
            addFonts($("#fontFamilyList"));
            this._addedFonts = true;
          }

          actions.forEach(function (action) {
            var button = createElement('button');
            button.className = classes.button;
            button.innerHTML = action.icon;
            // button.title = action.title;


            if (action.specialStyle) {
              for (var styleProp in action.specialStyle) {
                if (action.specialStyle.hasOwnProperty(styleProp)) {
                  button.style[styleProp] = action.specialStyle[styleProp];
                }
              }
            }


            button.setAttribute('type', 'button');
            button.onclick = function () {
              // should notify each action button to close its drop-down list.
              var lists = document.getElementsByClassName('list');
              var dropDownList = document.getElementById(action.dropDownListId);
              for (var k = 0; k < lists.length; k++) {
                if (lists[k] !== dropDownList) {
                  lists[k].style.display = 'none';
                }
              }
              if (action.type === 'drop-down') {
                if (button.contains(dropDownList)) {
                  dropDownList.style.display === 'none' ? (dropDownList.style.display = 'block') : (dropDownList.style.display = 'none'); //NOSONAR
                } else {
                  var dropDownListClone = dropDownList.cloneNode(true);
                  if (action.queryValue) {
                    addEventListener(dropDownListClone, 'click', action.queryValue);
                  }
                  button.appendChild(dropDownListClone);
                  var hostOffsetHeight = button.offsetHeight;
                  dropDownListClone.style.top = hostOffsetHeight + 'px';
                  dropDownListClone.style.display = 'block';
                  dropDownListClone.onclick = function (e) {
                    return action.result(e) && content.focus();
                  };
                }
              } else if (action.type === 'designer-gcui-widget') {
                $(action.widgetId).toggle();
              } else {
                return action.result() && content.focus();
              }
            };

            var handler;

            if (action.state) {
              handler = function () {
                return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
              };
              addEventListener(content, 'keyup', handler);
              addEventListener(content, 'mouseup', handler);
              addEventListener(button, 'click', handler);
            }

            if (action.queryValue) {
              handler = action.queryValue;
              addEventListener(content, 'keyup', handler);
              addEventListener(content, 'mouseup', handler);
              addEventListener(button, 'click', handler);
            }

            appendChild(actionbar, button);
          });

          if (settings.styleWithCSS) {
            exec('styleWithCSS');
          }
          exec(defaultParagraphSeparatorString, defaultParagraphSeparator);

          return settings.element;
        }
        var richEditor = { exec: exec, init: _initContent };
        spread.bind(GC.Spread.Sheets.Events.EnterCell, onSpreadEnterCell);
        function onSpreadEnterCell() {
          var sheet = spread.getActiveSheet();
          var contentWrapper = $('.rich-editor-content')[0];
          contentWrapper.innerHTML = "";
          var contentText = sheet.getValue(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), 3/* sheetArea */, 1/* richText */);
          if (contentText && contentText.richText) {
            for (var i = 0; i < contentText.richText.length; i++) {
              var elemAttr = [];
              if (contentText.richText[i].style && contentText.richText[i].text) {
                for (var styleProperty in contentText.richText[i].style) {
                  if (contentText.richText[i].style.hasOwnProperty(styleProperty)) {
                    switch (styleProperty) {
                      case 'vertAlign':
                        if (contentText.richText[i].style[styleProperty] === 2) {
                          elemAttr.push('subscript');
                        } else if (contentText.richText[i].style[styleProperty] === 1) {
                          elemAttr.push('superscript');
                        }
                        break;
                      case 'textDecoration':
                        if ((contentText.richText[i].style[styleProperty] & 1) === 1) {
                          elemAttr.push('underline');
                        }
                        if ((contentText.richText[i].style[styleProperty] & 2) === 2) {
                          elemAttr.push('strikeThrough');
                        }
                        break;
                      case 'foreColor':
                        elemAttr.push({
                          name: 'foreColor',
                          value: contentText.richText[i].style[styleProperty]
                        });
                        break;
                      case 'font':
                        var spanElem = createElement('div');
                        spanElem.style.font = contentText.richText[i].style[styleProperty];
                        if (spanElem.style.fontFamily) {
                          elemAttr.push({
                            name: 'fontName',
                            value: spanElem.style.fontFamily
                          });
                        }
                        if (spanElem.style.fontSize) {
                          elemAttr.push({
                            name: 'fontSize',
                            value: parseInt(spanElem.style.fontSize)
                          });
                        }
                        if (spanElem.style.fontWeight === 'bold') {
                          elemAttr.push('bold');
                        }
                        if (spanElem.style.fontStyle === 'italic') {
                          elemAttr.push('italic');
                        }
                        break;
                    }
                  }
                }
              }
              var parentElem = contentWrapper;
              for (var j = 0; j < elemAttr.length; j++) {
                var richTextElem;
                if (typeof elemAttr[j] === 'string') {
                  richTextElem = createRichTextElement(elemAttr[j]);
                } else if (typeof elemAttr[j] === 'object' && elemAttr[j]) {
                  richTextElem = createRichTextElement(elemAttr[j].name, elemAttr[j].value);
                }
                appendChild(parentElem, richTextElem);
                parentElem = richTextElem;
                if (j === elemAttr.length - 1 && richTextElem) {
                  richTextElem.innerHTML = contentText.richText[i].text;
                }
              }
            }
          } else {
            contentWrapper.innerHTML = contentText;
          }
        }
        richEditor.init({
          element: document.getElementById('richEditor'),
          defaultParagraphSeparator: 'p',
          styleWithCSS: false,
        });
        $("#setRichText").click(function () {
          var spread = GC.Spread.Sheets.findControl("ss");
          var sheet = spread.getActiveSheet();
          var richText = _getRichText();
          if (richText.length > 0) {
            sheet.setValue(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), {
              richText: richText
            });
          }
        });
      },
      // 导入文件
      importForm() {
        let self = this
        var excelFile = document.getElementById("fileDemo").files[0];
        // 导入有密码的文件夹
        var password = document.getElementById('password').value;
        this.excelIo.open(excelFile, function (json) {
          var workbookObj = json;
          self.spread.fromJSON(workbookObj);
        }, function (e) {
          console.log(e)
          // process error
          alert(e.errorMessage);
          if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
            document.getElementById('password').onselect = null;
          }
        }, { password: password });
      }
    }
  }
</script>
<style>
  .sample-tutorial {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .sample-spreadsheets {
    width: calc(100% - 280px);
    height: 100%;
    overflow: hidden;
    float: left;
  }

  .options-container {
    float: right;
    width: 280px;
    padding: 12px;
    height: 100%;
    box-sizing: border-box;
    background: #fbfbfb;
    overflow: auto;
  }

  .options-container1 {
    position: absolute;
    bottom: 30px;
    right: 0;
    width: 280px;
    padding: 12px;
    box-sizing: border-box;
    background: #fbfbfb;
    overflow: auto;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .list {
    list-style: none;
    display: none;
    position: absolute;
    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, .15);
    background-color: white;
  }

  .fontfamily-list {
    overflow: scroll;
    height: 200px;
  }

  .rich-editor {
    border: 1px solid rgba(10, 10, 10, 0.1);
    box-sizing: border-box;
    background-color: white;
  }

  .rich-editor-content {
    box-sizing: border-box;
    height: 270px;
    outline: 0;
    overflow-y: auto;
    padding: 10px;
  }

  #setRichText {
    display: inline-block;
    background-color: white;
    border: none;
    width: 120px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, .15);
  }

  .rich-editor-actionbar {
    background-color: #FFF;
    border-bottom: 1px solid rgba(10, 10, 10, 0.1);
  }

  .rich-editor-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    outline: 0;
    width: 30px;
    display: inline-block;
    margin: 0 3px;
    padding: 0 2px;
  }

  .drop-down-arrow {
    display: inline-block;
    height: 30px;
    line-height: 30px;
  }

  .drop-down-arrow:before {
    display: block;
    content: '';
    width: 0;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
    margin-top: 23px;
    margin-left: 2px;
  }

  .rich-editor-button-selected {
    background-color: #F0F0F0;
  }

  .color_picker_result {
    border-bottom: 5px solid black;
  }

  #fontSizeList {
    width: 40px;
  }

  #fontFamilyList {
    width: 140px;
  }

  #colorPicker {
    width: 70px;
  }

  .fontsize-item {
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }

  .fontfamily-item {
    width: 128px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 13px;
    cursor: pointer;
  }

  .colorpicker-item {
    width: 16px;
    height: 16px;
    margin: 1px;
    padding: 1px;
    border: 1px solid transparent;
    background-clip: content-box;
    float: left;
    display: inline-block;
  }

  .fontsize-item:hover {
    background-color: #DDDDDDAA;
  }

  .fontfamily-item:hover {
    background-color: #DDDDDDAA;
  }

  .colorpicker-item:hover {
    box-shadow: 1px 1px 1px 1px rgba(51, 51, 51, .15);
  }

  body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>